import styles from '../index.less';
import { Card, Row, Col, Input, Select,Button,Space,Table  } from 'antd'
import type { ColumnsType } from 'antd/es/table';
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '标题',
    width: 100,
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
  },
  { title: '状态', dataIndex: 'address', key: '1' },
  { title: '分类', dataIndex: 'address', key: '2' },
  { title: '标签', dataIndex: 'address', key: '3' },
  { title: '阅读量', dataIndex: 'address', key: '4' },
  { title: '喜欢数', dataIndex: 'address', key: '5' },
  { title: '发布时间', dataIndex: 'address', key: '6' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
    render: () => <a>action</a>,
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 40,
    address: 'London Park',
  },
];
export default function articlesAll() {
  return (
    <div>
      <div style={{ padding: '20px' }}>
        <Card>
          <Row>
            <Col span={5}>
              <div className={styles.flexs}>
                <span style={{ width: '55px' }}>标题：</span>
                <Input placeholder="请输入标题" />
              </div>
            </Col>
            <Col span={5}>
              <div className={styles.flexs}>
                <span style={{ width: '55px' }}>状态：</span>
                <Select
                style={{ width: 150 }}
                options={[
                  {
                    value: '已发布',
                    label: '已发布',
                  },
                  {
                    value: '草稿',
                    label: '草稿',
                  },
                ]}
                />
              </div>
            </Col>
            <Col span={5}>
              <div className={styles.flexs}>
                <span style={{ width: '55px' }}>分类：</span>
                <Select
                style={{ width: 150 }}
                options={[
                  {
                    value: '教育',
                    label: '教育',
                  },
                  {
                    value: 'vue',
                    label: 'vue',
                  },
                  {
                    value: 'react',
                    label: 'react',
                  },
                  {
                    value: '面试',
                    label: '面试',
                  },
                  {
                    value: '前端',
                    label: '前端',
                  },
                  {
                    value: '后端',
                    label: '后端',
                  },
                  {
                    value: '编程',
                    label: '编程',
                  },
                  {
                    value: '开发',
                    label: '开发',
                  },
                  {
                    value: '代码人生',
                    label: '代码人生',
                  },
                  {
                    value: 'node',
                    label: 'node',
                  },
                  {
                    value: '网工',
                    label: '网工',
                  },
                ]}
                />
              </div>
            </Col>
            <Col span={5}></Col>
            <Col span={4}>
                <Space>
                <Button type="primary">搜索</Button>
                <Button>重置</Button>
                </Space>
            </Col>
          </Row>
        </Card>
      </div>
      <div style={{ padding: '20px' }}>
        <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />
      </div>
    </div>
  );
}
